window.onload = function() {
  leftSwipe();
  itcast.iScroll({
    swipeDom: document.querySelector(".hm_category_right"),
    swipeType: "y",
    sipeDistance: 100
  });
};

//左侧的滑动效果
function leftSwipe() {
  /**
   * 1、滑动  touch
   * 2、在一定的区间范围内滑动，通过控制滑动定位区间实现
   * 3、在一定区间内做定位、定位区间
   * 4、点击滑动到顶部改变当前的样式，当滑动到底部的时候不需要做定位tap
   */
  //获取doc元素
  //父盒子
  var parentBox = document.querySelector(".hm_category_left");
  //子盒子
  var childBox = parentBox.querySelector("ul");
  var parentHeight = parentBox.offsetHeight;
  var childHeight = childBox.offsetHeight;
  //定位区间
  var maxPosition = 0; //最大定位区间
  var minPosition = parentHeight - childHeight; //最小定位区间
  //缓冲的距离
  var distance = 150;
  //滑动区间
  var maxSwipe = maxPosition + 150; //最大滑动区间
  var minSwipe = minPosition - 150; //最小滑动区间
  //添加过渡
  var addTransition = function() {
    childBox.style.webkitTransition = "all .2s"; //兼容
    childBox.style.transition = "all .2s";
  };
  //删除过渡
  var removeTransition = function() {
    childBox.style.webkitTransition = "none"; //兼容
    childBox.style.transition = "none";
  };
  //改变位子
  var setTranslateY = function(transitionY) {
    childBox.style.webkitTransform = "transitionY(" + transitionY + ")px";
    childBox.style.transform = "transitionY(" + transitionY + ")px";
  };
  //1、滑动  touch
  //参数
  var startY = 0;
  var moveY = 0;
  var distanceY = 0;
  /*
    var isMove=fales;
*/
  //记录当前定位
  var currY = 0;
  childBox.addEventListener("touchstart", function(e) {
    startY = e.touches[0].clientY;
  });
  childBox.addEventListener("touchmove", function(e) {
    moveY = e.touches[0].clientY;
    distanceY = moveY - startY;
    /*
    2、在一定的区间范围内滑动，通过控制滑动定位区间实现
    */
    //我们将要去做定位的位子，要在滑动区间范围内
    if (currY + distanceY < maxSwipe && currY + distanceY > minSwipe) {
      //删除过渡
      removeTransition();
      //做定位
      setTranslateY(currY + distanceY);
    }
  });
  //避免模拟器上的bug问题，事件冒泡机制
  window.addEventListener("touchend", function(e) {
    //3、在一定的区间内做定位、定位区间
    //将要定位的位子大于最大定位时
    if (currY + distanceY > maxPosition) {
      currY = maxPosition;
      //加过渡
      addTransition();
      //设置位子
      setTranslateY(currY);
    }
    //将要定位的位子小于最小定位时
    else if (currY + distanceY < minPosition) {
      currY = minPosition;
      //加过渡
      addTransition();
      //设置位子
      setTranslateY(currY);
    }
    //正常
    else {
      //设置当前的定位
      currY = currY + distanceY;
    }
    //重置参数
    startY = 0;
    moveY = 0;
    distanceY = 0;
  });
  //4、点击滑动到顶部改变当前的样式，当滑动到底部的时候不需要做定位
  var lis = childBox.querySelectorAll("li");
  itcast.tap(childBox, function(e) {
    //清除所有里的当前样式
    for (var i = 0; i < lis.length; i++) {
      lis[i].className = "";
      lis[i].index = i;
    }
    var li = e.target.parentNode; //点击当前的li    触发源
    li.className = "now";
    //将当前需要定位的位子计算出来
    console.log(li.index);
    var translateY = -li.index * 50; //向上滑动
    //当超过了最小定位区间不能定位
    //满足定位
    if (translateY > minPosition) {
      currY = translateY;
      //加过渡
      addTransition();
      //去做定位
      setTranslateY(currY);
    } else {
      currY = minPosition;
      //加过渡
      addTransition();
      //去做定位
      setTranslateY(currY);
    }
  });
}
